<script setup>
import Card from "@/app_bigscreen/Card.vue";
import LeftTop from "@/app_bigscreen/LeftTop.vue";
import LeftBottom from "@/app_bigscreen/LeftBottom.vue";
import RightTop from "@/app_bigscreen/RightTop.vue";
import RightBottom from "@/app_bigscreen/RightBottom.vue";
import Map from "@/app_bigscreen/Map.vue";
</script>
<template>
  <!--顶部-->
  <header class="header">
    <h1 class="logo">Python私教-数据大屏项目</h1>
  </header>
  <!--内容-->
  <section class="container">
    <!--左侧-->
    <section class="left">
      <Card>
        <LeftTop/>
      </Card>
      <Card>
        <LeftBottom/>
      </Card>
    </section>
    <!--中间-->
    <section class="center">
      <Map/>
    </section>
    <!--右侧-->
    <section class="right">
      <Card>
        <RightTop/>
      </Card>
      <Card>
        <RightBottom/>
      </Card>
    </section>
  </section>
</template>
<style scoped>
/*顶部样式*/
.header {
  height: 0.75rem;
  width: 100%;
  background-color: rgba(0, 0, 255, .2);
}

.header .logo {
  font-size: 0.5rem;
  color: #fff;
  text-align: center;
  line-height: 0.75rem;
}

/*内容样式*/
.container {
  min-width: 1200px;
  max-width: 2048px;
  margin: 0 auto;
  padding: .05rem .05rem 0;
  display: flex;
}

.container .left,
.container .right {
  flex: 3;
}

.container .center {
  flex: 5;
  background-color: rgba(12, 130, 255, .85);
  border: 1px solid deepskyblue;
  border-radius: 0.03rem;
  padding: 0.125rem;
  margin: 0.1rem;
}
</style>